<template>
  <div class="container" >
    <!-- 头部分 -->
    <header class="header">
      <div class="header-left">
        <img src="./assets/logo.png" alt="Logo" class="logo" />
        <span class="title">管道漏失智能检测系统</span>
      </div>
      <div class="header-right">
        <span>{{ year }}</span>
        <span style="margin: 0 10px; color: white;">年</span>
        <span>{{ month }}</span>
        <span style="margin: 0 10px; color: white;">月</span>
        <span>{{ day }}</span>
        <span style="margin: 0 10px; color: white;">日</span>
        <span>{{ time }}</span>
        <span style="margin: 0 20px; color: white;">{{ weekday }}</span>
      </div>
    </header>
    <div class="body">
        <!-- 主体内容 -->
     <div class="content">
        <!-- 左侧波形图 -->
        <div class="waveform">
        <!-- 顶部导航 -->
        <div class="header-nav">
          <div class="button" @click="flag = 'guandao'"  :class="{ active: flag === 'guandao' }">惯导数据可视化</div>
          <div class="button" @click="flag = 'shenyi'"   :class="{ active: flag === 'shenyi' }">声音数据可视化</div>
          <img src="../src/assets/setting.png" style="width: 25px;margin-left: 30px;" @click="openUpLoad" alt="">
        </div>

        <!-- 点击上传出现的弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            title="检测数据导入"
            width="600"
        >
        <div style="width: 100%;font-size: 15px;">
          <div style="display: flex;margin: 40px 0;">
            <span style="color: red;">*</span><div>地面标记器文件</div>
          </div>
          <el-upload
            class="custom-upload"
            drag
            v-model:file-list="fileListSampleImgChange2"
            :limit="1"
            accept=".txt" 
            :auto-upload="false"
            multiple 
  >
            <el-icon class="upload-icon"><upload-filled /></el-icon>
            <div class="el-upload__text">上传地面标记器文件</div>
          </el-upload>
          <div style="display: flex;margin: 40px 0;">
            <span style="color: red;">*</span><div>智能球声音文件</div>
          </div>
          <el-upload
              class="custom-upload"
              drag
              v-model:file-list="fileListSampleImgChange1"
              :limit="1"
              accept=".txt" 
              :auto-upload="false"
              multiple
              :on-change="handleFileChange1"
          >
            <el-icon class="upload-icon"><upload-filled /></el-icon>
            <div class="el-upload__text">上传智能球声音文件</div>
          </el-upload>
          <div style="display: flex;margin: 40px 0;">
            <span style="color: red;">*</span><div>智能球惯导文件</div>
          </div>
          <el-upload
              class="custom-upload"
              drag
              v-model:file-list="fileListSampleImgChange"
             :limit="1"
             accept=".txt" 
              :auto-upload="false"
              multiple
              :on-change="handleFileChange"
          >
            <el-icon class="upload-icon"><upload-filled /></el-icon>
            <div class="el-upload__text">上传智能球惯导文件</div>
          </el-upload>
        </div>

        <div class="my-2 ml-4" style="margin-top: 40px;">
          <el-radio-group v-model="radio2">
            <el-radio value="1">模式 1</el-radio>
            <el-radio value="2">模式 2</el-radio>
            <el-radio value="3">模式 3</el-radio>
            <el-radio value="4">模式 4</el-radio>
          </el-radio-group>
        </div>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUpload">
              确认
            </el-button>
          </div>
       </template>
       </el-dialog>

        <!-- 路径部分 -->
        <div  v-if="flag == 'guandao'"  style="display: flex;margin: 10px 0px;">
          <div style="color: #80ffff;font-size: 15px;font-weight: bold;">文件名称</div>
          <div style="margin-left: 30px;color: #fff;">{{daoName}}</div>
        </div>
        <div  v-else  style="display: flex;margin: 10px 0px;">
          <div style="color: #80ffff;font-size: 15px;font-weight: bold;">文件名称</div>
          <div style="margin-left: 30px;color: #fff;">{{listenName}}</div>
        </div>
          <!-- 左侧部分数据 -->
          <div  v-if="flag == 'guandao'"  style="display: flex;justify-content: space-evenly;">
            <div class="left-header">
              <div style="display: flex;">
                <div style="color: #80ffff;font-size:1.3rem;font-weight: bold;line-height: 100px;">惯导采样频率</div>
                <div style="margin-left: 30px;line-height: 100px;font-size:1.3rem; color: #fff;">0.01</div>
              </div>
            </div>
            <el-button  v-if="flag == 'guandao' &&  !showNullImg "     @click="changeDaoImg"  :style="{
              background: disabled ? 'rgba(12, 105, 198, 0.3)' : 'rgba(12, 105, 198, 0.6)',
              width: '200px',
              height: '80px',
              lineHeight: '80px',
              fontSize: '1.1rem',
              border: '1px solid blue',
              textAlign: 'center',
              color: 'white',
              marginTop: '10px'
            }">
              弯管识别
            </el-button>
          </div>

          <div  v-else  style="display: flex;justify-content: space-evenly;">
            <div class="left-header">
              <div style="display: flex;">
                <!-- 起始时间 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">起始时间</div>
                <div style="margin:0 15px;line-height: 33px;font-size:15px;color: #fff;">{{newStartTime == null ? '1970-01-01 00:00:00':newStartTime}}</div>
                <!-- 结束时间 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">结束时间</div>
                <div style="margin:0 15px;line-height: 33px;font-size:15px;color: #fff;">{{newEndTime == null ?'1970-01-01 00:01:00':newEndTime}}</div>
                <!-- 采样率 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">采样率</div>
                <div style="margin:0 15px;line-height: 33px;font-size:15px;color: #fff;">8000Hz</div>
              </div>
              <div style="display: flex;">
                <!-- 低截至频率 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">低截至频率</div>
                <div style="margin: 0 100px  0  80px;line-height: 33px;font-size:15px;color: #fff;">50Hz</div>
                <!-- 高截至频率 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">高截至频率</div>
                <div style="margin:0 15px;line-height: 33px;font-size:15px;color: #fff;">2000Hz</div>
              </div>
              <div style="display: flex;">
                <!-- 时域分段大小 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">时域分段大小</div>
                <div style="margin: 0 100px  0  65px;line-height: 33px;font-size:15px;color: #fff;">512ms</div>
                <!-- 声音放大倍数 -->
                <div style="color: #80ffff;font-size:15px;font-weight: bold;line-height: 33px;">声音放大倍数</div>
                <div style="margin:0 15px;line-height: 33px;font-size:15px;color: #fff;">10</div>
              </div>
            </div>
            <el-button  v-if="!showNullImg "     @click="changeListenImg"  :style="{
              background: disabled ? 'rgba(12, 105, 198, 0.3)' : 'rgba(12, 105, 198, 0.6)',
              width: '200px',
              height: '80px',
              lineHeight: '80px',
              fontSize: '1.1rem',
              border: '1px solid blue',
              textAlign: 'center',
              color: 'white',
              marginTop: '10px'
            }">
              漏点识别
            </el-button>
          </div>

          <div v-if="flag == 'guandao'" class="waveform-chart">
            <div style="display: flex;height: 30px;">
              <div style="width: 5px;height: 27px;background-color: skyblue;margin: 0 10px 0 10px;"></div>
              <span style="color: white;font-size: 20px;font-weight: 500;line-height: 30px;">惯导数据时域波形</span>
            </div>
            <div style="position: relative;">
              <div v-if="isLoading" class="loading-overlay">加载中...</div>
              <img style="width: 90%;"  v-if="!showNullImg && !showDaoImg "  src="./assets/02.png" />
              <img style="width: 90%;"  v-else-if="showNullImg && !showDaoImg"  src="./assets/03.png" />
              <img style="width: 90%;"  v-else  src="./assets/01.png" />

              <div style="width: 80%; margin-left: 10%;  height: 1.9%; position: absolute;background-color: #101e43;top: 31.4%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                  <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 59.8%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 87.7%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
            </div>
            </div>
            <div v-else class="waveform-chart">
              <!-- 俩个漏点 -->
            <div style="position: relative;"  v-if="radio == '1' ">
              <div v-if="isLoadingOne" class="loading-overlay">加载中...</div>
              <img style="width: 95%;"  v-if="!showNullImg && !showListenImg"  src="./assets/05.png" />
              <img style="width: 95%;"  v-else-if="showNullImg && !showListenImg"  src="./assets/04.png" />
              <img style="width: 95%;"  v-else  src="./assets/11.png" />
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 42.8%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 87.7%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
            </div>

            <!-- 一个漏点1 -->
            <div style="position: relative;"  v-if="radio == '2'">
              <div v-if="isLoadingOne" class="loading-overlay">加载中...</div>
              <img style="width: 95%;"  v-if="!showNullImg && !showListenImg"  src="./assets/07.png" />
              <img style="width: 95%;"  v-else-if="showNullImg && !showListenImg"  src="./assets/04.png" />
              <img style="width: 95%;"  v-else  src="./assets/08.png" />
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 42.8%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 87.7%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
            </div>
            <!--一个漏点2  -->
            <div style="position: relative;"  v-if="radio == '3'">
              <div v-if="isLoadingOne" class="loading-overlay">加载中...</div>
              <img style="width: 95%;"  v-if="!showNullImg && !showListenImg"  src="./assets/09.png" />
              <img style="width: 95%;"  v-else-if="showNullImg && !showListenImg"  src="./assets/04.png" />
              <img style="width: 95%;"  v-else  src="./assets/06.png" />
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 42.8%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 87.7%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
            </div>
            <!-- 无漏点 -->
            <div style="position: relative;"  v-if="radio == '4'">
              <img style="width: 95%;"  v-if="!showNullImg && !showListenImg"  src="./assets/10.png" />
              <img style="width: 95%;"  v-else-if="showNullImg && !showListenImg"  src="./assets/04.png" />
              <img style="width: 95%;"  v-else  src="./assets/10.png" />
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 42.8%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
              <div style="width: 80%;margin-left: 10%; height: 1.9%; position: absolute;background-color: #101e43;top: 87.7%;display: flex;color: #dcdcdc;font-size: 9px;justify-content: space-around;">
                <div v-for="time in timeList" :key="time">{{ time }}</div>
              </div>
            </div>
            </div>
        </div>




        <!-- 右侧线路图 -->
        <div class="pipeline">
          <div style="display: flex;">
              <div style="width: 5px;height: 27px;background-color: skyblue;margin: 0 10px 0 0;"></div>
              <span style="font-size: 20px;font-weight: 500;line-height: 30px;color: #fff;">实景管道线路图</span>
          </div>

          <div v-if="disabled" style="height: 70px;line-height: 70px;font-size: 22px;color: #fff;">
              导入数据启动分析
            </div>
            <div v-else-if="!disabled && radio == '4'" style="height: 70px;line-height: 70px;font-size: 22px;color: #fff;">
              无漏点
            </div>
          <div v-else style="display: flex;margin-top: 20px;gap: 20px;">
            <div>
              <el-select
                v-model="value"
                style="width: 100px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div v-if="radio == '1' && value == '漏点1'">
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">GIS坐标</div>
                <div style="margin-left: 40px;color: #fff">31.76221,117.27188</div>
              </div>
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">与初始点管道内距离</div>
                <div style="margin-left: 40px;color: #fff">27M
</div>
              </div>
            </div>
            <div v-if="radio == '1' && value == '漏点2'">
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">GIS坐标</div>
                <div style="margin-left: 40px;color: #fff">31.76231,117.27176</div>
              </div>
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">与初始点管道内距离</div>
                <div style="margin-left: 40px;color: #fff">73M </div>
              </div>
            </div>
            <div v-if="radio == '2'">
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">GIS坐标</div>
                <div style="margin-left: 40px;color: #fff"> 31.76221,117.27188</div>
              </div>
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">与初始点管道内距离</div>
                <div style="margin-left: 40px;color: #fff">27M
 </div>
              </div>
            </div>
            <div v-if="radio == '3'">
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">GIS坐标</div>
                <div style="margin-left: 40px;color: #fff;">31.76231,117.27176 </div>
              </div>
              <div style="display: flex;">
                <div style="color: #80ffff;font-size: 15px;font-weight: bold;">与初始点管道内距离</div>
                <div style="margin-left: 40px;color: #fff">73M</div>
              </div>
            </div>
            <div style="margin-left: 40px;width: 40px;height: 40px;background-color: #fff;">
              <el-button @click="toggleAudio" style="width: 100%; height: 100%;" type="text">
                 <!-- 根据播放状态切换图标 -->
                  <el-icon v-if="!isPlaying" size="30"><VideoPlay /></el-icon>
                  <el-icon v-else  size="30"><VideoPause /></el-icon>
              </el-button>
            </div>
              <!-- 添加音量控制滑块 -->
              <div style="height: 50px; display: flex; flex-direction: column; align-items: center; margin-top: 10px;">
      <el-slider
        v-model="volume"
        @input="changeVolume"
        :min="0"
        :max="1"
        :step="0.1"
        show-tooltip
        vertical
        height="100px"
      />
    </div>

          </div>
          <!-- 这里是图片相关的部分 -->
          <div style="margin-top: 10px;width: 75%;margin-left: 10%;">
            <div style="width: 90%;position: relative;">
              <img style="width: 100%;" src="./assets/load_bgc.png" alt="">

               <!-- 透明黑色遮罩层 -->
              <div class="overlay"  v-if="radio == '1'&& showCycle == true">
                <!-- 漏点1 -->
                <div @click="value = '漏点1'" class="leak-point" :style="{ top: y + '%', left: x + '%' }">
                  <div class="text"  :class="{ 'text2': value === '漏点1' }">漏点1</div>
                  <div class="circle" :class="{ 'circle2': value === '漏点1' }"></div>
                  <div class="ripple" :class="{ 'ripple2': value === '漏点1' }"></div>
                </div>
                <!-- 漏点2 -->
                <div @click="value = '漏点2'" class="leak-point" :style="{ top: y1 + '%', left: x1 + '%' }">
                  <div class="text" :class="{ 'text2': value === '漏点2' }">漏点2</div>
                  <div class="circle" :class="{ 'circle2': value === '漏点2' }"></div>
                  <div class="ripple" :class="{ 'ripple2': value === '漏点2' }"></div>
                </div>

                 <!-- 初始点 -->
                 <div class="leak-point" :style="{ top: y2 + '%', left: x2 + '%' }">
                  <div class="text1">初始点</div>
                  <div class="circle1"></div>
                  <div class="ripple1"></div>
                </div>
              </div>

              <div class="overlay"  v-if="radio == '2'&& showCycle == true">
                <!-- 漏点1 -->
                <div class="leak-point" :style="{ top: y + '%', left: x + '%' }">
                  <div class="text"  :class="{ 'text2': value === '漏点1' }">漏点1</div>
                  <div class="circle" :class="{ 'circle2': value === '漏点1' }"></div>
                  <div class="ripple" :class="{ 'ripple2': value === '漏点1' }"></div>
                </div>
                 <!-- 初始点 -->
                 <div class="leak-point" :style="{ top: y2 + '%', left: x2 + '%' }">
                  <div class="text1">初始点</div>
                  <div class="circle1"></div>
                  <div class="ripple1"></div>
                </div>
              </div>

              <div class="overlay"  v-if="radio == '3'&& showCycle == true">
                <!-- 漏点2 -->
                <div class="leak-point" :style="{ top: y1 + '%', left: x1 + '%' }">
                  <div class="text"  :class="{ 'text2': value === '漏点1' }">漏点1</div>
                  <div class="circle" :class="{ 'circle2': value === '漏点1' }"></div>
                  <div class="ripple" :class="{ 'ripple2': value === '漏点1' }"></div>
                </div>

                 <!-- 初始点 -->
                 <div class="leak-point" :style="{ top: y2 + '%', left: x2 + '%' }">
                  <div class="text1">初始点</div>
                  <div class="circle1"></div>
                  <div class="ripple1"></div>
                </div>
              </div>

              <div class="overlay"  v-if="radio == '4' && showCycle == true">
                 <!-- 初始点 -->
                 <div class="leak-point" :style="{ top: y2 + '%', left: x2 + '%' }">
                  <div class="text1">初始点</div>
                  <div class="circle1"></div>
                  <div class="ripple1"></div>
                </div>
              </div>

            </div>
          </div>
          <div>

          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { UploadFilled,VideoPause,VideoPlay } from '@element-plus/icons-vue'
import { ElMessage,ElLoading } from 'element-plus'
import dayjs from "dayjs";
import request from "./utils/requset";
import audioFile01 from './assets/loudian01.wav';
import audioFile02 from './assets/loudian02.wav';

const isLoading = ref(false); // 加载状态
const isLoadingOne = ref(false); // 加载状态
const showDaoImg = ref(false)
const showListenImg = ref(false)
const year = ref<number>();
const month = ref<number>();
const day = ref<number>();
const weekday = ref("");
const time = ref("");
const flag = ref("guandao")
const value = ref('漏点1')

const x = ref(39); // 1横坐标
const y = ref(47); // 1纵坐标

const x1 = ref(59.7); // 2横坐标
const y1 = ref(35.5); // 2纵坐标


const x2 = ref(29); // 横坐标
const y2 = ref(36.4); // 纵坐标

const getTime = ref()
const timeList = ref();

const fileListSampleImgChange1 = ref([]); // 存储待上传的文件-----无效数据
const fileListSampleImgChange2 = ref([]); // 存储待上传的文件-----无效数据
const fileListSampleImgChange = ref([]); // 存储上传成功的文件信息

const dialogVisible = ref(false)

const radio2 = ref('1')
const radio = ref('1')

const disabled = ref(true)

const showCycle = ref(false)

const showNullImg = ref(true)

const options = ref([
  {
    value: '漏点1',
    label: '漏点1',
  },
  {
    value: '漏点2',
    label: '漏点2',
  },
])

const svg = `
<path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `


//惯导相关的图片切换
const changeDaoImg = () => {
  if (isLoading.value) return;

  isLoading.value = true; // 显示加载状态
  setTimeout(() => {
    isLoading.value = false; // 5 秒后取消加载状态
    showDaoImg.value = true
  }, 5000);
};

const changeListenImg = () => {
  if (isLoadingOne.value) return;
  isLoadingOne.value = true; // 显示加载状态
  setTimeout(() => {
    isLoadingOne.value = false; // 5 秒后取消加载状态
    showListenImg.value = true
    showCycle.value = true
    disabled.value = false
  }, 5000);
};

// 声音相关的
    const isPlaying = ref(false); // 播放状态
    const volume = ref(1); // 默认音量最大
    // const audio = new Audio(audioFile01); // 音频文件路径
    const newAudio = ref()
    if(radio.value == '1' && value.value == '漏点1'){
      newAudio.value = new Audio(audioFile01); // 音频文件路径
    }else if(radio.value == '1' && value.value == '漏点2'){
      newAudio.value = new Audio(audioFile02); // 音频文件路径
    }else if(radio.value == '2') {
      newAudio.value = new Audio(audioFile01); // 音频文件路径
    }else {
      newAudio.value = new Audio(audioFile02); // 音频文件路径
    }
    // audio.type = 'audio/wav'; // 明确指定音频类型
      newAudio.value.volume = volume.value; // 设置音量为最大

        // 监听音频播放完毕事件
      newAudio.value.addEventListener('ended', () => {
      isPlaying.value = false; // 自动设置为暂停状态
      console.log('音频播放完毕，已暂停');
    });
    // 切换音频播放/暂停
    const toggleAudio = () => {
  console.log('当前播放状态:', isPlaying.value);
  if (isPlaying.value) {
    newAudio.value.pause(); // 暂停音频
    console.log('音频已暂停');
  } else {
    newAudio.value.play(); // 播放音频
    console.log('音频正在播放');
  }
  isPlaying.value = !isPlaying.value; // 切换播放状态
};

    // 调节声音大小的
    const changeVolume = () => {
  newAudio.value.volume = volume.value;
  console.log("当前音量:", volume.value);
};



const updateTime = () => {
  const now = new Date();
  year.value = now.getFullYear();
  month.value = now.getMonth() + 1; // 月份从 0 开始
  day.value = now.getDate();
  weekday.value = now.toLocaleString("zh-CN", { weekday: "long" });
  time.value = now.toLocaleTimeString("zh-CN"); // 只获取时分秒
};

// 打开弹窗

const openUpLoad = () => {
  dialogVisible.value = true
  disabled.value = true
  fileListSampleImgChange1.value = []
  fileListSampleImgChange.value = []
  fileListSampleImgChange2.value = []
  radio2.value = '1'
}
const listenName = ref()
const handleFileChange = (file:any) => {
  listenName.value =  file.name
  console.log("声音文件名：", file.name);  // 获取文件名
};
const daoName = ref()
const handleFileChange1 = (file:any) => {
    daoName.value = file.name
  console.log("惯导文件名：", file.name);  // 获取文件名
};

// 上传文件接口
const submitUpload =() => {
  showCycle.value = false
  showListenImg.value = false
  showDaoImg.value = false
  if (fileListSampleImgChange.value.length === 0 || fileListSampleImgChange1.value.length === 0 || fileListSampleImgChange2.value.length === 0) {
    ElMessage.error('存在必传项为空')
        return; 
      }

    const loadingInstance = ElLoading.service({
    lock: true,
    text: "数据解析中",
    spinner: svg,
    background: "rgba(0, 0, 0, 0.8)",
  });

  const formData = new FormData();
  fileListSampleImgChange.value.forEach((file:any) => {
        formData.append("file", file.raw); // `file.raw` 是 el-upload 存储的原始文件
    });
    request.post('/inspection/xiaoqiu',formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },}).then((res)=>{
            getTime.value = res.data
            console.log(getTime.value);
            radio.value = radio2.value
            if(radio2.value == '1'){
              options.value = [
              {
                value: '漏点1',
                label: '漏点1',
              },
              {
                value: '漏点2',
                label: '漏点2',
              },
            ]
            }else if(radio2.value == '2' || radio2.value == '3'){
              options.value = [
              {
                value: '漏点1',
                label: '漏点1',
              },
            ]
            }
            generateTimeSlots(getTime.value)
            ElMessage.success('上传成功开始解析')
            dialogVisible.value = false
            showNullImg.value = false
            loadingInstance.close();
    })
    

}

// 处理时间
const newEndTime = ref()
const newStartTime = ref()
const generateTimeSlots = (data:string) => {
  const endTime = dayjs(data); // 重点时间
  const startTime = endTime.subtract(10, "minute"); // 起点时间
  newEndTime.value = endTime.format("YYYY-MM-DD HH:mm:ss")
  newStartTime.value = startTime.format("YYYY-MM-DD HH:mm:ss")
  const interval = 10 * 60 / 6; // 计算每个时间点间隔（秒）
  
  let timeSlots = [];
  for (let i = 0; i < 7; i++) {
    timeSlots.push(startTime.add(i * interval, "second").format("YYYY-MM-DD HH:mm:ss"));
  }

  timeList.value = timeSlots;
};


onMounted(() => {
  updateTime();
  setInterval(updateTime, 1000);
});
</script>

<style scoped>
/* 全局容器 */
.container {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden; /* 避免滚动条 */
}

/* 头部 */
.header {
  width: 100vw; /* 确保不会超出屏幕 */
  max-width: 100vw;
  height: 100px;
  background-color: #4a148c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px; /* 适当缩小 padding */
  color: white;
  box-sizing: border-box; /* 避免 padding 导致超出 */
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 64px;
  margin-right: 16px;
}

.title {
  font-size: 2.2rem;
  font-weight: bold;
}

.header-right {
  font-size: 18px;
  color: #00aaff;
}

/* 内容部分 */
.body {
  background-color: #101e43;
  width: 100%;
  height: calc(100vh - 100px); /* 让 body 填满剩余空间 */
  overflow: hidden;
  padding: 10px 50px 0px 50px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.button {
  padding:10px 20px;
  background: rgba(12, 105, 198, 0.3);
  font-weight: bold;
  color: white;
} 
.button.active {
  border-bottom: 2px solid skyblue; /* 选中时下边框变天蓝色 */
}
.left-header {
  width: 100%;
  height: 100px;
  /* background-color: #fff; */
  margin-bottom: 30px;
}

/* 主体内容布局 */
.content {
  display: flex;
  justify-content: space-between;
}

/* 左侧波形图 */
.waveform {
  width: 65%;
  border-radius: 5px;
}

.waveform-chart img {
  width: 100%;
  margin-bottom: 10px;
}

/* 右侧管道线路图 */
.pipeline {
  width: 35%;
  padding-left: 20px;
  padding-right: 50px;
}

.pipeline img {
  width: 100%;
}

.visualization-btn {
  background: #0055ff;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

/* 黑色半透明遮罩层 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* 50% 透明度 */
  z-index: 1; /* 让遮罩层在图片上方 */
}

/* 动画相关 */
/* 外层容器 */
.leak-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 文字 */
.text {
  font-size: 16px;
  font-weight: bold;
  color: orange;
  margin-bottom: 45px;
}
.text1 {
  font-size: 16px;
  font-weight: bold;
  color: rgb(65, 91, 211);
  margin-bottom: 45px;
}
.text2 {
  font-size: 16px;
  font-weight: bold;
  color: rgb(229, 14, 14);
  margin-bottom: 45px;
}

/* 固定的橙色点 */
.circle {
  width: 16px;
  height: 16px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 20px;
}
.circle1 {
  width: 16px;
  height: 16px;
  background-color: rgb(63, 48, 197);
  border-radius: 50%;
  position: absolute;
  top: 20px;
}
.circle2 {
  width: 16px;
  height: 16px;
  background-color: rgb(238, 31, 27);
  border-radius: 50%;
  position: absolute;
  top: 20px;
}

/* 扩散动画的透明圆 */
.ripple {
  width: 30px;
  height: 30px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  opacity: 0.6;
  animation: ripple-animation 1.5s infinite ease-out;
}
.ripple1 {
  width: 30px;
  height: 30px;
  background-color: rgb(41, 46, 195);
  border-radius: 50%;
  position: absolute;
  top: 12px;
  opacity: 0.6;
  animation: ripple-animation 1.5s infinite ease-out;
}
.ripple2 {
  width: 30px;
  height: 30px;
  background-color: rgb(195, 69, 41);
  border-radius: 50%;
  position: absolute;
  top: 12px;
  opacity: 0.6;
  animation: ripple-animation 1.5s infinite ease-out;
}

/* 扩散动画 */
@keyframes ripple-animation {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}


.custom-upload {
  height: 150px; /* 设置拖拽区域高度 */
}

.custom-upload .el-upload-dragger {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.custom-upload .upload-icon {
  font-size: 40px; /* 控制图标大小 */
  color: #409eff; /* 可选：改变图标颜色 */
}

.custom-upload .el-upload__text {
  font-size: 16px; /* 控制文字大小 */
}

.loading-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(12, 105, 198, 0.3);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
</style>
